/*
  core.styl
  should contain only layout styling and global variable for project
*/

$mobile=480px

mobile-flex()
  display: flex
  flex-direction: column


html,
body
  margin: 0
  padding: 0

  font-family: Montserrat


// mobile layout
// XXX: mobile first xD
@media screen and (max-width: $mobile)
  #about,
  .how-tos
    mobile-flex: true


@media screen and (min-width: $mobile)
  #about
    display: grid
    grid-template-columns: 1fr 1fr
    grid-template-areas: 'descr descr' 'stable nightly'

  .how-tos
    display: grid
    grid-template-columns: 1fr 1fr 1fr
    grid-gap: 1em
    padding: 1em


/* HACK: view and view containers */

.view
  padding: 1em



/* HACK: universal consistent buttons */

.button
  display: block
  box-sizing: border-box
  height: 2em
  min-width: 2em

.button--primary


/* TODO: ↓ to separate file `views.styl` */

.features--current
.features--incoming
  display: grid
  grid-template-columns: 3em auto
  align-items: center
  font-size: 13pt

  i
    font-size: 25pt

#features
  display: flex
  justify-content: space-around;


#about
  padding: 3em

  &__descr
    grid-area: descr


.how-to
  text-align: center
  height: 10em

.how-to__icon
  font-size: 4em

.how-to__name
  font-weight: bold

.how-tos header
  text-align: center

.side
  padding: 2em

.side__logo
  max-width: (2*$mobile/3)
  width: 100%
  margin: auto

.side__content
  text-align: justify
